<script setup lang="ts">
// 接收分页参数
const props = defineProps({
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 10 },
  total: { type: Number, default: 0 }
});

// 只暴露一个统一的事件
const emit = defineEmits<{
  (e: 'pagination-change', val: { page: number, pageSize: number }): void;
}>();

// 页码变化
const handlePageChange = (page: number) => {
  emit('pagination-change', { page, pageSize: props.pageSize });
};

// 每页条数变化
const handlePageSizeChange = (pageSize: number) => {
  emit('pagination-change', { page: 1, pageSize });
};
</script>

<template>
  <div class="mt-5 flex justify-center">
    <n-pagination
        v-model:page="props.currentPage"
        :page-size="props.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :show-size-picker="true"
        :show-quick-jumper="true"
        :page-count="Math.ceil(props.total / props.pageSize)"
        @update:page="handlePageChange"
        @update:page-size="handlePageSizeChange"
    />
  </div>
</template>

<style scoped>
</style>
